<template>
  <div class="debind-email">
    <el-table :data="list">
      <el-table-column type="index" label="#" width="50" />
      <el-table-column prop="emailType" label="配置邮箱" min-width="180" :formatter="getEmailTypeName"  />
      <el-table-column prop="emailUrl" label="邮箱账号" min-width="180" />
      <el-table-column prop="_action" label="操作" width="60">
        <template #default="{ row }">
          <el-button type="primary" link @click="onClick(row)">解绑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <ElPagination
        style="margin-top: 10px;"
        v-model:current-page="page.index"
        v-model:page-size="page.size"
        hide-on-single-page
        small
        background
        layout="total, prev, pager, next, jumper"
        :total="total"
        @change="getList"
      />
  </div>
</template>

<script setup lang="ts">
import { shallowRef, reactive } from 'vue'
import { getBindEmail, deleteBindEmail } from '../api'
import { emailTypeOptions } from '../constant.ts'

const loading = shallowRef(false)
const page = reactive({ index: 1, size: 10 })
const list = shallowRef<any[]>([])
const total = shallowRef(0)
const getList = () => {
  loading.value = true
  getBindEmail({ condition: {}, page: page, sort: { order: '', sidx: '' } })
    .then(res => {
      list.value = res.list || []
      total.value = res.totalCount || 0
    })
    .finally(() => {
      loading.value = false
    })
}

const search = () => {
  page.index = 1
  getList()
}

const getEmailTypeName = (row: any) => {
  const obj = emailTypeOptions.find(i => i.value === row.emailType)
  return obj?.label || ''
}

const onClick = async (row: any) => {
  await deleteBindEmail([row.emailConfigId])
  search()
}

getList()

</script>

<style lang="scss" scoped>
.debind-email {
  padding: 20px;
}
</style>
